<template>
    <div class="main1">
        <div class="inner">
            <div class="title">
                <h4>地理坐标</h4>
                <div class="line"></div>
                <p>COORDINATE</p>
            </div>
            <div class="content">
                <div id="container1" style="height: 308px"></div>
                <div content="info"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import AMapLoader from "@amap/amap-jsapi-loader";

    export default {
        name: "address1",
        data() {
            return {
                infoWindow: "",
                map: "",//地图实例化对象
                info: [],//信息窗体的内容
            }
        },
        methods: {
            initMap() {
                this.map = AMapLoader.load({
                    "key": "ce55ff31b2ec8da2ea6fdd74663562d6", // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                        "version": '1.1',   // AMapUI 缺省 1.1
                        "plugins": [],       // 需要加载的 AMapUI ui插件
                    }
                })
                    .then(AMap => {
                        this.map = new AMap.Map("container1", {
                            //设置地图显示的缩放级别
                            zoom: 14,
                            // 是否允许鼠标拖拽
                            dragEnable: true,
                            // 鼠标滚轮放大缩小
                            scrollWheel: true,
                            // 双击放大缩小
                            doubleClickZoom: true,
                            // 键盘控制发达缩小移动旋转
                            keyboardEnable: false,
                            // 手势控制
                            touchZoom: false,
                            center: [114.60794417790987, 38.01886471359529],//设置地图中心点坐标
                            //在指定位置打开信息窗体
                        });
                        //构建信息窗体中显示的内容
                        this.info.push("<p class='input-item'>河北省石家庄市方大科技园</p></div></div>");

                        this.infoWindow = new AMap.InfoWindow({
                            content: this.info.join("")  //使用默认信息窗体框样式，显示信息内容
                        });
                        this.infoWindow.open(this.map, this.map.getCenter());
                    })
                    .catch(e => {
                        console.log(e);
                    });
            },

        },
        mounted() {
            this.initMap()
        }
    }
</script>

<style scoped lang="less">
    #container1 {
        width: 1170px;
        height: 379px;
        margin: 30px 0;
    }

    .main1 {
        .inner {
            padding-bottom: 20px;
            border-bottom: 1px dashed #ccc;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            width: 1170px;
            box-sizing: border-box;

            .title {
                padding-top: 30px;
                text-align: center;

                h4 {
                    font-family: 微软雅黑;
                    font-size: 14px;
                    font-weight: 500;
                    margin: 0px;
                    padding: 5px 0px;
                    display: block;
                }

                .line {
                    margin: auto;
                    background: #000;
                    height: 1px;
                    width: 70px;
                }

                p {
                    font-weight: 400;
                    padding: 10px 0;
                    display: block;
                }
            }
        }
    }
</style>